<template>
  <el-dialog
    v-model="dialogVisible"
    append-to-body
    class="upgrade-dialog custom-dialog"
    modal-class="dialog-center"
    width="500px"
    :close-on-click-modal="!closeModal"
    :close-on-press-escape="false"
    :before-close="handleClose">
    <div class="upgrade-box">
      <div class="upgrade-msg">
        <div class="title">{{$t('message.kindReminder')}}</div>
        <div class="content">{{ message }}</div>
<!--        <div class="content">{{ message + message + message + message + message + message + message + message + message + message + message + message + message }}</div>-->
      </div>
    </div>
    <div class="footer-btn" v-if="showBtn">
      <el-button type="danger" size="medium" @click="handleUpgrade">{{$t('message.buttons.upgradeNow')}}</el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance
} from 'vue' 
import type { ComponentInternalInstance } from 'vue'
import { getStore } from '@/utils/store'
import { useRouter } from "vue-router"
import i18n from '@/lang'
const {t} = i18n.global
const $t = t
const router = useRouter();
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
const emit = defineEmits([""])
const props = defineProps({
  message:{
    type:String,
    defaul:""
  },
  remove:{
    type:Function
  },
  showBtn:{
    type:Boolean,
    default:true
  },
  openUrl:{
    type:String,
    default:''
  }
})
const dialogVisible = ref(false)
onMounted(()=>{
  init()
})
function init() {
  dialogVisible.value = true
}
function handleClose() {
  if(props.remove) props.remove()
  dialogVisible.value = false
}
function handleUpgrade() {
  // let linkList = getStore({name:'linkList'})
  // let jumbObj = linkList.filter(item=>item.type=='BACKGROUND_PERSONALIZED_CONFIGURATION')[0]
  // proxy.$openUrl(`${jumbObj.url}/#/auth`, '_blank')
  proxy.$openUrl(props.openUrl, '_blank')
}
</script>
<style lang="scss">
.upgrade-dialog{
  .top-img{
    width: 100%;
    img{
      width: 100%;
      height: auto;
    }
  }
  .upgrade-box{
    position: relative;
    display: flex;
    //align-items: center;
    justify-content: center;
    //background-color: rgba(255, 255, 255, 0);
    width: 100%;
    height: 100%;
    background-image: url(./upgrade.png);
    background-size: calc(100% + 60px) calc(100% + 60px);
    background-repeat: no-repeat;
    background-position: -30px -30px;
    .upgrade-msg{
      margin-top: 35%;
      width: 100%;
      padding: 0 50px;
      .title{
        font-size: 18px;
        line-height: 40px;
      }
      .content{
        padding: 0 16px;
        height: 90px;
        overflow-y: auto;
      }
    }
  }
  .el-dialog{
    background-color: rgba(255, 255, 255, 0);
    box-shadow: none;
  }
  .el-dialog__header{
    display: none!important;
  }
  .el-dialog__body{
    border-radius: 8px!important;
    padding: 0!important;
    height: 400px;
  }
  .footer-btn{
    width: 100%;
    position: absolute;
    bottom: 50px;
    text-align: center;
    .el-button--danger{
      background-color: red;
    }
  }
}
</style>